<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            display: block;
            width: 408px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto 0;
        }
        ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 30px;
            border: 1px solid #CCCCCC;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .color {
            border-bottom: 4px solid red;
        }
        div {
            float: left;
            margin-top: 50px;
            display: none;
            line-height: 40px;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var a = 0;
            $('li').mouseover(function () {
                $(this).addClass('color').siblings().removeClass('color');
                a = $(this).index();
                $('div').hide().eq(a).show();
            })
        })
    </script>
</head>
<body>
<ul>
    <li class="color">菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
    <li>菜单四</li>
    <div style="display: block">
       111111111111111111111111111dsddddddddd
        在线互动式文档分享平台，在这里，您可以和千万网友分享自己手中的文档，
        全文阅读其他用户的文档，同时，也可以利用分享文档获取的积分下载文档...
    </div>
    <div>
        222222222222222222222222222222dsdsdsdd
        在线互动式文档分享平台，在这里，您可以和千万网友分享自己手中的文档，
        全文阅读其他用户的文档，同时，也可以利用分享文档获取的积分下载文档...
    </div>
    <div>
        333333333333333333333333333333333dsdsd
        在线互动式文档分享平台，在这里，您可以和千万网友分享自己手中的文档，
        全文阅读其他用户的文档，同时，也可以利用分享文档获取的积分下载文档...
    </div>
    <div>
        44444444444444444444444444444444444dsd
        在线互动式文档分享平台，在这里，您可以和千万网友分享自己手中的文档，
        全文阅读其他用户的文档，同时，也可以利用分享文档获取的积分下载文档...
    </div>
</ul>
</body>
</html>